<template>
  <div class="app-container">
    <el-row>
      <el-table :data="list">
        <el-table-column label="救援计划标题" prop="name" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
        <el-table-column label="事件信息" align="center" prop="planDate" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEventDetail(scope.row)">事件详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="总指挥" align="center" prop="planDate" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应急预案" align="center" prop="planName" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.planName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="响应级别" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ responseLevelOption[scope.row.responseLevel - 1].label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="290">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleMonitor(scope.row)">关键节点监控</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <plan-event-detail ref="planEventDetail" />
  </div>
</template>

<script>
import PlanEventDetail from "./components/PlanEventDetail.vue";
import Cookies from "js-cookie";
import { getMonitorHandleList } from "@/api/response/monitor";
import * as Auth from "@/utils/auth";

export default {
  name: "HandleList",
  components: { PlanEventDetail },
  dicts: ["usetypecode_dict", "eventlevelcode_dict", "info_report_channel"],
  data() {
    return {
      list: [],
      // 分页
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      userId: 0,
      responseLevelOption: [
        {
          label: "Ⅰ级响应",
          value: 1,
        },
        {
          label: "Ⅱ级响应",
          value: 2,
        },
        {
          label: "Ⅲ级响应",
          value: 3,
        },
        {
          label: "Ⅳ级响应",
          value: 4,
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.userId = Auth.getUserId();
    this.queryParams.userId = this.userId;
    this.getList();
  },
  methods: {
    getList() {
      getMonitorHandleList(this.queryParams).then(res => {
        console.log(res);
        this.list = res.rows;
        this.total = res.total;
      });
    },
    // 应急事件详情
    handleEventDetail(data) {
      this.$refs.planEventDetail.showDetail(data.infoId);
    },
    handleMonitor(data) {
      this.$tab.openPage("处置监控", "/handleMonitor/detail", { hdInfoId: data.hdInfoId });
    },
  },
};
</script>

<style scoped lang="scss"></style>
